<div style="color:red;"><?= $this->errorMsg; ?></div>
<?= $this->formRegister->setAction($this->commonUrl . '/user/register'); ?>

<script type="text/javascript">
$('#country_id').change(function (){
    $.getJSON(
        AJAX_URL + '/user/ajax-states-by-country/',
        {id: $(this).val(), format: 'json'},
        function(data) {
            var states = data.json;
            if (states) {
                var options = '';
                for (var i = 0; i < states.length; i++) {
                    options += '<option value="' + states[i].id + '">' + states[i].name + '</option>' + "\n";
                }
                $("#state_id").append(options);
            } else {
                $("#state_id").html('<option label=" --- " value="0"> --- </option>');
                $('#div_city').html('<input type="text" name="city_id" id="city_id" value="">');
            }
        }
    );
});
$('#state_id').change(function (){
    $.getJSON(
        AJAX_URL + '/user/ajax-cities-by-state/',
        {id: $(this).val(), format: 'json'},
        function(data) {
            var cities = data.json;
            if (cities) {
                var options = '<select id="city" name="city">'
                            + '<option label=" --- " value="0"> --- </option>';
                for (var i = 0; i < cities.length; i++) {
                    options += '<option value="' + cities[i].id + '">' + cities[i].name + '</option>' + "\n";
                }
                options += '</select>';
                $('#div_city').html(options);
            } else {
                $('#div_city').html('<input type="text" name="city_id" id="city_id" value="">');
            }
        }
    );
});
</script>